<template>
  <view class="register">
		<view class="back-button" @click="goBack">
					<image  class="back-button-image" src= "/static/return.png" />
			</view>
    <view class="content">
      <view class="header" @click="setimage">
        <image :src="logoImage" />
      </view>
			<view class="margin-bottom-sm" style="text-align: center;">

			  <custom-update-avatar title="" :src="avatar"></custom-update-avatar>
			</view>

			<view class="margin-bottom-sm" style="text-align: center;">

			  <custom-upload-avatar title="" :src="avatar"></custom-upload-avatar>
			</view>

      <view class="main">
				<view class="uni-padding-wrap">
						<radio-group>
									<view v-for="(item, index) in list" :key="index">
										<radio :value="item.id" :checked="item.id==radioValue" @click="radioCheck(index)"></radio>
										<view>{{item.value}}</view>
									</view>
						</radio-group>
				</view>


        <wInput
          v-model="form.uname"
          type="text"
          maxlength="30"
          placeholder="请输入昵称"
        ></wInput>


        <wInput
          v-model="form.birthday"
          type="text"
          placeholder="请输入生日"
        ></wInput>
        <wInput
          v-model="form.InvitationCode"
          type="text"
          maxlength="6"
          placeholder="请输入邀请码"
        ></wInput>
      </view>

      <wButton
        class="wbutton"
        text="确认"
        :rotate="isRotate"
        @click="startReg"
      ></wButton>
    </view>
  </view>
</template>

<script>
import { mapActions } from 'vuex'
import wInput from '../../components/watch-login/watch-input.vue'
import wButton from '../../components/watch-login/watch-button.vue'
import localStore from '@/helpers/localStore.js'
export default {
  components: {
    wInput,
    wButton
  },

  data() {
    return {
      logoImage: '/static/addpicture.png',
      form: {
        phone: '',
        password: '',
        uname: '',
				birthday: '',
				InvitationCode: '',
				sex: '',
				avatar:'',
      },
      isRotate: false ,//是否加载旋转
			list: [{
									value: '男生',
									id: '1'
								},
								{
									value: '女生',
									id: '0'
								},

			],
			radioValue: '',
    }
  },

  computed: {
    // validate() {
    //   if (this.form.password.length < 6) {
    //     this.$u.toast('密码至少为6位')
    //     return false
    //   }
    //   return true
    // },
  },
	onLoad(options) {
		// this.form.phone = options.form.phone,
		// this.form.password = options.form.password,
		const phone = options.phone
		const password = options.password
		phone = phone.replace(/"/g, "");
		password = password.replace(/"/g, "");
		this.form.phone = phone
		this.form.password = password
	},
  methods: {
    ...mapActions('user', ['sendRegisterEmail', 'register']),

		goBack(){
				history.back()
		},

//自定义单选按钮的点击方法
			radioCheck(index) {
				this.list.forEach((item => {
					item.isCheck = false
				}))
				if (this.radioValue == this.list[index].id) {
					this.radioValue = null
				} else {
					this.radioValue = this.list[index].id
				}
				console.log(this.radioValue)

				this.form.sex= this.radioValue
			},

    async getVerCode() {
      await this.sendRegisterEmail(this.form.phone)
			const verificationCode = localStore.get("verificationCode") //后端传来的验证码
      this.$u.toast(verificationCode)
			this.$refs.runCode.$emit('runCode')
    },

    async startReg() {

				try {
				  await this.register_personinfo({
				    phone: this.form.phone,
				    password: this.form.password,
				  })
				  this.isRotate = false
				  this.$u.toast('注册成功')
				  setTimeout(() => {
				    uni.reLaunch({
				      url: '/pages/login/login'
				    })
				  }, 1000)
				} catch {
				  this.isRotate = false
				}

    },
}
}
</script>

<style>
@import url('../../components/watch-login/css/icon.css');
@import url('./css/main.css');
.back-button {
  position: relative;
  left: 10px;
  top: 10px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  /* 添加其他样式，如背景颜色、边框等 */
}
.back-button-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 添加其他样式，如边框、阴影等 */
}
.register{

}
.header{
	background-color: #f2f2f2;
}
.uni-padding-wrap {
  padding: 10px;
}
.radio-group {
  display: flex;
  flex-wrap: wrap;
}
.radio-item {
  display: flex;
  align-items: center;
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>
